<template>
	<view>
		<uni-popup ref="popup" :mask-click="false" :safe-area="false" type="dialog">
			<view class="popup">
				<!-- <image class="icon_close" src="../../../static/image/icon_close.png" @click="closePopup()"></image> -->
				<image class="icon_content" :src="icon_src"></image>
				<view class="txtArea flex-c">
					<text>{{text1}}</text>
					<text>{{text2}}</text>
					<text>{{text3}}</text>
				</view>
				<view class="popupBottomView flex-c" @click="btnEvent()"><text>{{btn_text}}</text></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	name: 'annoyFree-popup',
	props:{
		icon_src:{
			type:String,
			default:''
		}, //图标的src
	},
	data() {
		return {
			text1:'',
			text2:'',
			text3:'',
			btn_text:'确定',
			flag:null, //不同的功能标志位
		};
	},
	methods:{
		/* 
		 *可复用的组件:
		 */
		openPopup(content,position,flag){
			this.text1 = content.text1;
			this.text2 = content.text2;
			this.text3 = content.text3;
			this.btn_text = content.btn_text;
			this.$refs.popup.open(position);
		},
		closePopup(){
			this.$refs.popup.close();
		},
		btnEvent(){
			this.$emit('btnEvent',this.btn_text);
		}
	}
};
</script>

<style>
	.flex-c {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.popup {
		width: 620rpx;
		height: 750rpx;
		background-color: white;
		border-radius: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
	
	.icon_close {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 26rpx;
		right: 35rpx;
	}
	.icon_content {
		margin-top: 93rpx;
		width: 238rpx;
		height: 238rpx;
	}
	.txtArea {
		margin-top: 20rpx;
	}
	.txtArea text{
		font-size: 52rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #333333;
	}
	.popupBottomView {
		margin-bottom: 0rpx;
		width: 100%;
		height: 120rpx;
		border-radius: 0 0 15px 15px;
		background-color: #0659c7;
	}
	.popupBottomView text {
		font-size: 44rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #ffffff;
	}
</style>
